<template>
    <div class="pictureVerify">
        <el-dialog title="提示" :visible.sync="centerDialogVisible">
            <p>您确定要“<span></span>”该图片的认证？</p>
            <p>确定后不可修改</p>
            <span slot="footer" class="dialog-footer">                   
                    <el-button  @click="centerDialogVisible = false">确 定</el-button>
                </span>
        </el-dialog>
        <div class="searchTop">
            <el-form :model="ruleForm" :inline="true" ref="ruleForm" class="myForm">
                <el-form-item label="认证账号" class="account condition">
                    <el-input v-model="ruleForm.account" placeholder="请输入认证账号"></el-input>
                </el-form-item>
                <el-form-item label="公司名称" class="companyName condition">
                    <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item class="btn condition">
                    <el-button @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="pictureContent">
            <div class="pictureTop">
                <ul>
                    <li v-for="(item,index) in topTitle" @click="tabSwtich(index)">
                        <router-link to="" :class="{active:flag == index}">{{item.titleName}}</router-link>
                    </li>
                </ul>
            </div>
            <div class="pictureBox">
                <div class="pictureTitle">
                    <div class="title title_1">
                        <span>门店名称</span>
                    </div>
                    <div class="title title_2">
                        <span>门店图片</span>
                    </div>
                    <div class="title title_3">
                        <span>状态</span>
                    </div>
                    <div class="title title_4">
                        <span>认证账号</span>
                    </div>
                    <div class="title title_5">
                        <span>操作</span>
                    </div>
                </div>
                <div class="pictureList">
                    <div class="list">
                        <div class="con con_1">
                            <span class="messageResult messageResult_1">杭州链家</span>
                        </div>
                        <div class="con con_2">
                            <div>
                                <img src="../../../static/images/LOVE.jpg" alt="">
                                <span>查看</span>
                            </div>
                            <div>
                                <img src="../../../static/images/LOVE.jpg" alt="">
                                <span>查看</span>
                            </div>
                            <div>
                                <img src="../../../static/images/LOVE.jpg" alt="">
                                <span>查看</span>
                            </div>
                                                     
                        </div>
                        <div class="con con_3">
                            <span>未认证</span>
                        </div>
                        <div class="con con_4">
                            <span>4324445</span>
                        </div>
                        <div class="con con_5">
                            <button class="agreeBtn" @click="centerDialogVisible = true"><i class="icon iconfont icon-tongguo"></i> 通过</button>
                            <button class="refuseBtn" @click="centerDialogVisible = true"><i class="icon iconfont icon-jujue"></i> 拒绝</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "pictureVerify",
        data() {
            return {
                centerDialogVisible: false,
                flag: 0,
                ruleForm: {
                    account: "",
                    companyName: ""
                },
                topTitle: [{
                    titleName: "全部",
                }, {
                    titleName: "未认证",
                }, {
                    titleName: "已认证",
                }, {
                    titleName: "未通过",
                }]
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            tabSwtich(index) {
                this.flag = index;
            },
        }
    }
</script>
<style lang="scss">
    .pictureVerify {
        width: 100%;
        position: relative;
        .el-dialog__wrapper {
            height: 100%;
            width: 100%;
            .el-dialog {
                position: absolute;
                width: 760px !important;
                height: 313px;
                box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6);
                border: solid 1px #bfbfbf;
                margin: auto !important;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                .el-dialog__header {
                    padding: 0;
                    height: 41px;
                    line-height: 41px;
                    border-bottom: 1px solid #bfbfbf;
                    .el-dialog__title {
                        font-family: "MicrosoftYaHei";
                        font-size: 14px;
                        color: #48697b;
                        margin-left: 20px;
                    }
                    .el-dialog__headerbtn {
                        top: 13px;
                    }
                }
                .el-dialog__body {
                    padding: 0;
                    text-align: center;
                    margin-top: 40px;
                    p {
                        font-family: 'MicrosoftYaHei';
                        font-weight: bold;
                        font-size: 18px;
                        color: #8ea8b6;
                        margin-top: 6px;
                    }
                }
                .el-dialog__footer {
                    text-align: center;
                    margin-top: 30px;
                    .el-button {
                        border: 0;
                        color: #ffffff;
                        font-family: "MicrosoftYaHei";
                        font-size: 14px;
                        background-color: #40dcbf;
                        border-radius: 4px;
                        padding: 13px 99px;
                    }
                }
            }
        }
        .searchTop {
            width: 100%;
            position: relative;
            top: 20px;
            .myForm {
                width: 100%;
                text-align: right;
                .condition {
                    .el-form-item__label {
                        line-height: 34px;
                        font-family: "MicrosoftYaHei";
                        font-size: 14px;
                        color: #6491aa;
                    }
                    .el-form-item__content {
                        line-height: 34px;
                        .el-input__inner {
                            height: 34px;
                            line-height: 34px;
                        }
                        .el-input__inner:focus {
                            border-color: #40dcbf;
                        }
                        .el-button {
                            background: #40dcbf;
                            border: 1px solid #40dcbf;
                            color: #ffffff;
                            padding: 8px 10px;
                        }
                    }
                }
                .account,
                .companyName {
                    margin-right: 1.5%;
                    ;
                }
                .btn {
                    margin-right: 2%;
                    ;
                }
            }
        }
        .pictureContent {
            position: relative;
            width: 96%;
            margin-left: 2%;
            background-color: #ffffff;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 0px 4px 4px 4px;
            margin-top: 16px;
            .pictureTop {
                width: 100%;
                height: 50px;
                border-bottom: solid 1px rgba(100, 145, 170, 0.3);
                ul {
                    width: 94%;
                    margin-left: 3%;
                    height: 50px;
                    .active {
                        color: #40dcbf;
                        border-bottom: 3px solid #40dcbf;
                    }
                    li {
                        display: inline-block;
                        height: 50px;
                        line-height: 50px;
                        font-family: 'MicrosoftYaHei';
                        font-size: 14px;
                        color: #6491aa;
                        a {
                            display: inline-block;
                            height: 47px;
                            line-height: 47px;
                            font-family: 'MicrosoftYaHei';
                            font-size: 14px;
                            color: #6491aa;
                            margin-right: 58px;
                        }
                        a:hover {
                            color: #40dcbf;
                            border-bottom: 3px solid #40dcbf;
                        }
                    }
                }
            }
            .pictureBox {
                width: 98%;
                margin-left: 1%;
                .pictureTitle {
                    width: 100%;
                    border-bottom: solid 2px rgba(120, 175, 205, 0.5);
                    height: 48px;
                    clear: both;
                    .title {
                        float: left;
                        height: 100%;
                        line-height: 50px;
                        span {
                            font-family: 'MicrosoftYaHei';
                            font-size: 14px;
                            font-weight: bold;
                            color: #48697b;
                            margin-left: 15px;
                        }
                    }
                    .title_1 {
                        width: 15%;
                    }
                    .title_2 {
                        width: 35%;
                    }
                    .title_3 {
                        width: 15%;
                    }
                    .title_4 {
                        width: 15%;
                    }
                    .title_5 {
                        width: 20%;
                    }
                }
                .pictureList {
                    width: 100%;
                    .list {
                        position: relative;
                        width: 100%;
                        height: 69px;
                        clear: both;
                        border-bottom: solid 1px rgba(120, 175, 205, 0.2);
                        .con {
                            float: left;
                            height: 100%;
                            position: relative;
                        }
                        .con_1 {
                            width: 15%;
                            span {
                                position: relative;
                                font-family: 'MicrosoftYaHei';
                                font-size: 14px;
                                margin-left: 15px;
                                top: 22px;
                            }
                        }
                        .con_2 {
                            width: 35%;
                            
                            div {
                                float: left;
                                position: relative;
                                top: 10px;
                                span {
                                    margin-left: 5px;
                                    font-family: 'MicrosoftYaHei';
                                    font-size: 14px;
                                    color: #72b2d5;
                                    top: -20px;
                                    position: relative;
                                }
                                img {
                                    position: relative;
                                    // top: 10px;
                                    width: 50px;
                                    margin-left: 15px;
                                    border: solid 1px #78afcd;
                                }
                            }
                        }
                        .con_3 {
                            width: 15%;
                            span {
                                position: relative;
                                font-family: 'MicrosoftYaHei';
                                font-size: 14px;
                                margin-left: 15px;
                                top: 22px;
                            }
                        }
                        .con_4 {
                            width: 15%;
                            span {
                                position: relative;
                                font-family: 'MicrosoftYaHei';
                                font-size: 14px;
                                margin-left: 15px;
                                top: 22px;
                                color: #48697b;
                            }
                        }
                        .con_5 {
                            width: 20%;
                            button {
                                position: relative;
                                font-family: 'MicrosoftYaHei';
                                border: 0;
                                outline: none;
                                width: 78px;
                                height: 26px;
                                top: 22px;
                                background-color: #ffffff;
                                cursor: pointer;
                            }
                            .agreeBtn {
                                border: solid 1px #1ec335;
                                color: #1ec335;
                                margin-left: 15px;
                                margin-right: 8px;
                            }
                            .refuseBtn {
                                border: solid 1px #ff3535;
                                color: #ff3535;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
